<!-- 在 TypeScript 中设置脚本 -->
<script setup lang="ts">
// 引入 Vue 相关功能
import { computed } from 'vue';
// 引入 Naive UI 的组件和主题
import { NConfigProvider, darkTheme } from 'naive-ui';
// 引入应用程序和主题相关的存储模块
import { useAppStore } from './store/modules/app';
import { useThemeStore } from './store/modules/theme';
// 引入 Naive UI 的本地化文件
import { naiveDateLocales, naiveLocales } from './locales/naive';

// 定义选项
defineOptions({
  name: 'App'
});

// 使用应用程序存储模块
const appStore = useAppStore();
// 使用主题存储模块
const themeStore = useThemeStore();

// 计算属性：根据主题模式返回 Naive UI 的暗色主题或 undefined
const naiveDarkTheme = computed(() => (themeStore.darkMode ? darkTheme : undefined));

// 计算属性：返回当前应用程序语言对应的 Naive UI 本地化配置
const naiveLocale = computed(() => {
  return naiveLocales[appStore.locale];
});

// 计算属性：返回当前应用程序语言对应的 Naive UI 日期本地化配置
const naiveDateLocale = computed(() => {
  return naiveDateLocales[appStore.locale];
});
</script>

<!-- 模板部分 -->
<template>
  <!-- Naive UI 配置提供者 -->
  <NConfigProvider
    :theme="naiveDarkTheme"
    :theme-overrides="themeStore.naiveTheme"
    :locale="naiveLocale"
    :date-locale="naiveDateLocale"
    class="h-full"
  >
    <!-- 应用程序提供者 -->
    <AppProvider>
      <!-- 路由视图 -->
      <RouterView class="bg-layout" />
    </AppProvider>
  </NConfigProvider>
</template>

<!-- 样式部分 -->
<style scoped></style>
